<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-25 14:06:28
 * @LastEditTime: 2023-06-28 23:51:57
 * @FilePath: \my-project\src\views\home\IndexView.vue
-->
<template>
  <div class="cq-index">
    <div class="cq-banner">
      <swiper-bar :indexBanners="indexBanners"/>
    </div>
    <div class="main w1160">
        <div class="center-item w1160 flex flex-around flex-center">
            <img :src="logo" width="76" height="70" alt="!">
            <p class="c333 fz20">
                橙券，是权益营销方案提供商，为实现品牌-市场-用户的紧密互联提供强有力的智慧支持。
            </p>
            <a href="#" class="cff7 icon-font-my">
                了解更多
            </a>
        </div>
        <div class="con mb148">
            <div class="con-title mb65">
                <img :src="brand" width="391" height="86" alt="!">
            </div>
            <div class="con-desc">
                <ul class="con-brand flex flex-between">
                    <li v-for="(item) in brandDate" :key="item.id">
                        <div class="mask">
                            <img :src="$utils.getImg(item.pic)" width="90" height="90" alt="!">
                            <div class="desc-detail">
                                <h3>{{item.title}}</h3>
                                <p>{{item.desc}}</p>
                                <span class="icon-font-mf5">了解更多</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="con-tech w1160 tc">
            <div class="con-title mb65">
                <img :src="science" width="302" height="79" alt="!">
            </div>
            <ul class="tech-industry flex flex-around fz18 mb98">
                <li v-for="(item,idx) in industrys" :key="idx">
                    <a href="#">{{item}}</a>
                </li>
            </ul>
            <div class="tech-wrap">
                <a href="#" class="tech-icon icon-left"></a>
                <ul class="tech-desc">
                    <li v-for="item in sponsors" :key="item.id">
                        <img :src="$utils.getImg(item.pic)" width="218" height="55" alt="!">
                        <p>{{item.desc}}</p>
                    </li>
                </ul>
                <a href="#" class="tech-icon icon-right"></a>
            </div>
        </div>
    </div>
    <div class="footer-banner cfff flex flex-column flex-center">
        <h2 class="fw400 fz48 mb25">
            依托橙券，聚焦权益，全面合作
        </h2>
        <div class="w622 fz20 flex flex-around mb32">
            <p>全国服务热线：400-096-0828</p><span>|</span>
            <p>商务合作专线：156-6806-1789</p>
        </div>
        <a href="#">
            <span class="f-more icon-font-mf5">
                了解更多
            </span>
        </a>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //默认banner
      indexBanners: [],
      swiperBanners: [],
      logo: require('@/assets/images/logo-tips.png'),
      brand: require('@/assets/images/橙品牌.png'),
      science: require('@/assets/images/用科技.png'),
      brandDate: [
    {
      id: 0,
      title: "橙营销",
      desc: "营销助力品牌升级",
      pic: "cyx.png"
    },
    {
      id: 1,
      title: "橙积分",
      desc: "智慧金融解决方案服务商",
      pic: "cjf.png"
    },
    {
      id: 2,
      title: "橙金融",
      desc: "智慧金融解决方案服务商",
      pic: "cjr.png"
    },
    {
      id: 3,
      title: "橙福利",
      desc: "开创员工福利新时代",
      pic: "cfl.png"
    }
  ],
  industrys: ["金融行业", "互联网行业", "保险行业", "汽车行业", "传媒行业", "通信行业"],
  sponsors: [
    {
      id: 0,
      pic: "联通.png",
      desc: "作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。"
    },
    {
      id: 1,
      pic: "腾讯.png",
      desc: "作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。"
    },
    {
      id: 2,
      pic: "银联.png",
      desc: "作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统，实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。"
    }
  ]
    }
  },
created(){ 
  this.getIndexbanners();
},
mounted(){
    
},
watch:{},
computed:{
},
methods:{
  //前台官网获取轮播图
  async getIndexbanners() {
    const data =  await this.$req('/indexbanners', 'get');
    console.log('data:', data);
    this.indexBanners = data.data;
  }
},
}
</script>
<style lang="scss" scoped>
$Url:url(../../assets/images/marketing.jpg), url(../../assets/images/integral.jpg), url(../../assets/images/financial.jpg),url(../../assets/images/welfare.png);
.swiper-container {
        width: 100vw;
        height: 680px;
    }
.icon-font-my {
  position: relative;
  &:after {
  position: absolute;
  z-index: 9999;
  top: 0;
  right: 25px;
  content: "\e6b9";
  font-family: "iconfont" !important;
  font-size: 16px;
  transform: rotate(-90deg);
  transition: transform .5s linear;
}

}
.icon-font-mf5 {
  position: relative;
  &:after {
  position: absolute;
  z-index: 9999;
  top: 1px;
  right: 25px;
  content: "\e6b9";
  font-family: "iconfont" !important;
  font-size: 16px;
  transform: rotate(-90deg);
  transition: transform .5s linear;
}
}


.main {
  position: relative;
  margin: 0 auto;
}

.center-item {
  position: absolute;
  z-index: 999;
  top: -30px;
  left: 0;
  height: 118px;
  line-height: 118px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 54px 0 rgba(92, 107, 143, 0.21);
  a {
  line-height: 40px;
  width: 150px;
  text-align: center;
  border: 1px solid #ff7200;
  border-radius: 20px;
  &:hover.icon-font-my:after {
  transform: rotate(-90deg) translateY(5px);
    }
  }
}

.main {
  padding-top: 248px;
  text-align: center;
}

.main .con li {
  box-sizing: border-box;
  position: relative;
  width: 275px;
  height: 400px;
  cursor: pointer;
  transition: .3s linear;
  .mask {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .4);
  }
  &:hover .mask {
  background-color: rgba(0, 0, 0, .1);
  border: 1px solid #fff;
  }
  &:hover {
  transform: scale(1.15);
  padding: 8px;
  box-shadow: 0 0 10px 8px rgba(220,220,220,.9) inset;
  }
}

.con-desc li span {
  display: block;
  color: #fff;
  margin-top: 24px;
  height: 40px;
  line-height: 40px;
  width: 150px;
  border: 1px solid #fff;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, .1);
  opacity: 0;
}

.con-desc li:hover span {
  opacity: 1;
}

.con-desc li:hover .icon-font-mf5:after {
  transform: rotate(-90deg) translateY(5px);
}

@each $val in $Url {
  $i: index($Url, $val);
  .main .con li:nth-of-type(#{$i}) {
  background: $val no-repeat center/cover;
  }
}

.con li 
{
  h3 {
  font-size: 28px;
  line-height: 30px;
  color: #fff;
  font-weight: 400;
  }
  p {
  line-height: 30px;
  color: #dadada;
}
}

.con .desc-detail {
  margin-top: 36px;
}

.wrap {
  background: url(../../assets/images/bg1.png) no-repeat center/cover;
  .con-tech {
  box-sizing: border-box;
  height: 912px;
  padding-top: 82px;
  li a {
  display: block;
  width: 181px;
  height: 50px;
  line-height: 50px;
  color: #333;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 -1px 21px 0 rgba(192, 192, 192, 0.35);
  &:hover {
  color: #fff;
  background-color: #ff7200;
  }
  }
  .tech-desc {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  padding: 0 70px;
  margin-bottom: 143px;
  li {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: left;
  text-indent: 2em;
  color: #666;
  font-size: 14px;
  padding: 93px 45px 0;
  width: 500px;
  height: 391px;
  background-color: #fbfcfe;
  box-shadow: 0 -1px 21px 0px rgba(192, 192, 192, 0.35);
  cursor: pointer;
  transition: .2s linear;
  &:nth-of-type(3) {
  position: absolute;
  z-index: 1;
  box-shadow: 0 -1px 21px 0px rgba(114, 113, 113, 0.3);
  transform: scale(1.15);
  }
  p {
  line-height: 30px;
}
}
}
}
}

.tech-wrap {
  position: relative;
}

.tech-icon {
  position: absolute;
  width: 53px;
  height: 53px;
  top: 50%;
}

.icon-right {
  z-index: 99;
  background: url(../../assets/images/→→.png) no-repeat center/cover;
  right: 0;
}

.icon-left {
  z-index: 99;
  background: url(../../assets/images/←←.png) no-repeat center/cover;
  left: 0;
}

.footer-banner {
  box-sizing: border-box;
  height: 330px;
  background: url(../../assets/images/bg3.png);
  .f-more {
  display: block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #e6e6e6;
  text-align: center;
  border-radius: 20px;
  color: #fff;
  &:hover.icon-font-mf5:after {
  transform: rotate(-90deg) translateY(5px);
  }
}
}
</style>
